<template>
  <div class="home" @mousewheel="click">
    <!-- 头部内容 -->
    <div class="home-header-container">
      <div class="home-header-wrapper" v-show="Show">
        <div>国际创新...</div>
        <div>
          <input type="text" placeholder="请输入搜索内容">
        </div>
      </div>
      <div class="show-header" v-show="isShow">
        <input type="text" placeholder="请输入内容">
      </div>
    </div>
    <!-- 分类列表 -->
    <div class="nav-list-container">
      <div class="nav-list-wrapper">
        <div v-for="(item,index) in navlist "
        :key="index"
        class="nav-list"
        >
          <div class="nav-list-img"> 
            <img :src="item.icon" alt="">
          </div>
          <div>{{item.name}}</div>
        </div>
      </div>
    </div>
    <!-- 商品列表内容 -->
      <h4>附近商家</h4>
      <div class="sort-container">
        <div>综合排序</div>
        <div>销量最高</div>
        <div>距离最近</div>
        <div>筛选</div>
      </div>
      <div>
        <Storelist v-for="(item,index) in shoplist "
        :key="index"
        :item="item"
         />
      </div>
  </div>
</template>

<script>
import Storelist from '../components/Storelist'

export default {

  components: {
    Storelist
  },
  data(){
    return{
      isShow:false,
      Show:true
    }
  },
  methods:{
    click(){
      var str=window.pageYOffset
      console.log(str)
      if(str>200){
        this.isShow=true
        this.Show=false
      }else{
         this.isShow=false
        this.Show=true
      }
    }
  },
  mounted(){
    this.$store.dispatch("getnavlist")
    this.$store.dispatch("getshoplist")
    this.$store.dispatch("getdetails")
  },
  computed:{
    // 分类
    navlist:function(){
      return this.$store.state.navlist
    },
    // 商品数据
    shoplist:function(){
      return this.$store.state.shoplist
    }
  }
}
</script>
<style  scoped>
.home-header-container{
    width: 100%;
    height: 64px;
    background: #000;
    position: fixed;
    top: 0;
}
.home-header-wrapper{
    width: 100%;
    height: 64px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.nav-list-container{
    margin-top: 64px;
    width: 100%;
    height: 200px;
    overflow: scroll;
    /* background: skyblue; */
}
.nav-list-wrapper{
    width: 200%;
    height: 200px;
    display: flex;
    /* margin-bottom: 30px; */
    /* align-items: center; */
    justify-content: start;
    flex-wrap: wrap;
    /* background: teal; */
}
.nav-list{
    width: 10%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 14px;
}
.nav-list-img{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-list-img img{
    width: 70%;
}


.sort-container{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.sort-container div{
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
h4{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.show-header{
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.show-header input{
    width: 90%;
    height: 40px;
    border: 1px solid #000;
}
</style>
